<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<!-- 나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->

<title>최종경로</title>
<link rel="stylesheet" href="assets/css/rout.css">
<style type="text/css">
/** 배경 레이어의 위치, 크기, 투명도 지정 > 기본적으로 표시되지 않도록 설정 */
div#glayLayer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: black;
	filter: alpha(opacity = 60);
	opacity: 0.60;
}

/** 이미지가 표현될 레이어를 화면 중앙에 배치 > 기본적으로 표시되지 않도록 설정 */
#overLayer {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -175px;
	margin-left: -140px;
}

/***/
#glayLayer, #overLayer{
	z-index: 10000;
}
</style>

</head>



<body>

	<!-- 팝업창 -->
	<div id="myModal" class="modal fade" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		data-backdrop="false">
		<div class="modal-dialog">

			<!--내용 영역 -->
			<div class="modal-body">
				<p>알람을 설정 하시겠습니까??</p>
			</div>
			<!--하단 영역 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-inverse nav_btns"
					data-dismiss="modal">NO</button>
				<button type="button" class="btn btn-inverse nav_btns"
					onclick="location.replace('index.jsp'); return false;">YES</button>
			</div>
		</div>
	</div>


	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-fixed-top" role="navigation">
		<div class="nav_content text-center">
			<div class="pull-left">
				<div class="nav_menu_btn pull-left text-center">
					<a class="back_btn" onclick="history.back();"><i class="fa fa-arrow-left"></i></a>
				</div>
				<!-- <button id="back_btn" type="button" class="btn nav_btns nav_btn_back" onclick="history.back();"><i class="icon-arrow-left"></i></button> -->
			</div>
			<span class="page_title"><strong>이동시작</strong></span>
			<div class="submit_btn pull-right text-center">
				<a href="javascript:$('#sr-to-ap').submit();"><i class="fa fa-home"></i></a>
			</div>
		</div>
	</nav> <!--네비게이션바 끝-->
	<!-- 안내 바 ------------------------------------------------------
	<div class="clock">
	</div>
	<hr />
	<div class="rout-box">
	</div>-->
	
	<div class="cel-box">	
		<!-- 스크립트로 들어간당 ^____^ 이히힛 -->
		</div>
	</div>
	

	
	<div class="list-box panel-group">
		<!-- 스크립트로 들어간당 ^____^ 이히힛 -->
	</div>

	<div id='glayLayer'></div>
	<div id='overLayer'></div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script id="android"></script>
	<script id="toast"></script>
	<script type="text/javascript">	
		var userBrowser = navigator.userAgent.toLowerCase();
		//브라우져가 크롬이면
		if (userBrowser.indexOf("android") != -1){
			$('#android').attr("src", "assets/js/cordova.js");
			$('#toast').attr("src", "assets/js/toast.js");
			
			document.addEventListener("deviceready", onDeviceReady, false);
			
			var watchID = null;

			function onDeviceReady() {
				var options = { timeout: 30000, enableHighAccuracy: true };
				watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
				
				var dbSize = 1 * 1024 * 1024;
				var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
			
				var key = sessionStorage["journey_key"];
				var legs = JSON.parse(localStorage[key]);

				var is_al = null;
				var al_info = null;
				
				var step = 0;

				function onSuccess(position) {			
					if (step >= is_al.length) {
						navigator.geolocation.clearWatch(watchID);
						watchID = null;
					}
					
					if (step != 0) {
						if (is_al[step] == 0) {
							step++;
						} else if (is_al[step] == 1) {
							if (distance(legs.steps[step-1].end_location.b, legs.steps[step-1].end_location.d, position.coords.latitude, position.coords.longitude) < Number(al_info[step])) {
								window.plugins.toastViewer.show("도착 " + al_info[step] + "m 전 입니다.");
								playBeep();
								vibrate();
								step++;
							}
						}
					}
				}
				
				// onError Callback receives a PositionError object
				//
				function onError(error) {
					alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
				}
				
				// Beep three times
				//
				function playBeep() {
					navigator.notification.beep(2);
				}
				
				// Vibrate for 2 seconds
				//
				function vibrate() {
					navigator.notification.vibrate(5000);	
				}
				
				journeyAlDB.transaction(function(tx){
					tx.executeSql("SELECT is_al, al_info FROM journeyAlDB WHERE key = ?", [key], 
						start, function(tx, e) {
						}
					);
				});
				
				////////////////////////////////////////////////////////
				/*             거리계산             
				위도와 경도를 받아와 계산하는코드로 latitude1,longitude1
				은 현재위치의 위도와 경도. latitude2,longitude2은 도착
				위치의 위도와 경도
				                                                      */
				////////////////////////////////////////////////////////
					
				function toRadians(degree){
					return degree * Math.PI /180;
				}

				function distance(latitude1,longitude1,latitude2,longitude2){
					//R은 지구 반지름을 킬로미터로 환산한 값
					var R = 6378.1;
					var deltaLatitude = toRadians(latitude2-latitude1);
					var deltaLongitude = toRadians(longitude2-longitude1);
					latitude1 = toRadians(latitude1);
					latitude2 = toRadians(latitude2);

					var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);
					var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
					var d = R * c;
					
					return Math.floor(d * 1000);
				}
				
				function start(tx, rs){
					var db_is_al = rs.rows.item(0).is_al;
					var db_al_info = rs.rows.item(0).al_info;
					db_is_al = db_is_al.replace("[", "");
					db_is_al = db_is_al.replace("]", "");
					db_al_info = db_al_info.replace("[", "");
					db_al_info = db_al_info.replace("]", "");
					is_al = db_is_al.split(",");
					al_info = db_al_info.split(",");
					
					////////////////////////////////////////////////////////
					/* 	[carousel을 이용한 경로화면]
					카러셀을 이용해서 만든 경로화면으로 스텝별로 화면이 나오
					게 설정 , 출발스텝은 나오지않음
					*/
					////////////////////////////////////////////////////////
					var htmltxt5 = '';
					htmltxt5 += '<div class="cel-content">';
					htmltxt5 += '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">'
					htmltxt5 += '<ol class="step-array">';

					for (var i = 0; i < legs.steps.length+1; i++) {
						htmltxt5 += '<button data-target="#carousel-example-generic" data-slide-to="'+i+'" class="btn btn-warning btn-xs">step'+(i+1)+'</button>';
					}
					
					htmltxt5 += '</ol>';
				  	htmltxt5 += '<div class="carousel-inner">';
				  	htmltxt5 +=	'<div class="item active text-center">';
				  	htmltxt5 +=	'<div>';
				  	htmltxt5 +=	'<div class="inline-block marin-top-50">';
				  	htmltxt5 +=	'</div>';
				  	htmltxt5 +=	'<div class="inline-block">';
				  	
			  		if (legs.steps[0].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
						htmltxt5 +=	'<div class="loca-name1">';
						htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[0].transit.line.vehicle.icon + '">';
						htmltxt5 +=	legs.start_address + '에서 출발';
						
						if (is_al[0]==0) {
							htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
						} else {
							htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + 0 + '" class="text-danger"><strong>' + al_info[0] + '분 전</strong></span></span></div>';
						}
						
						htmltxt5 +=	'</div>';
						
			  		} else { // 만약 도보일 경우 리스트		
						htmltxt5 +=	'<div class="loca-name1">';
						htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						htmltxt5 +=	legs.start_address + '에서 출발';
						
						if (is_al[0]==0) {
							htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
						} else {
							htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + 0 + '" class="text-danger"><strong>'+al_info[0]+'분 전</strong></span></span></div>';
						}
						
						htmltxt5 +=	'</div>';
					}
						
				  	htmltxt5 +=	'</div>';
				  	htmltxt5 +=	'</div>';
				  	htmltxt5 +=	'</div>';
				  	
				  	for (var j = 1; j < legs.steps.length+1; j++) {
				  			
				  		htmltxt5 +=	'<div class="item text-center">';
				  		htmltxt5 +=	'<div>';
				  		htmltxt5 +=	'<div class="inline-block marin-top-50">';//큰아이콘 시작
				  		htmltxt5 +=	'</div>';//큰아이콘 끝
				  		htmltxt5 +=	'<div class="inline-block">'; //내용부분 시작
				  	
				  		if (legs.steps[j-1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt5 +=	'<div class="loca-name1">';
							htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-1].transit.line.vehicle.icon + '">';
							htmltxt5 +=	'<span class="icon-pos2" style="background-color:' + legs.steps[j-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>' + legs.steps[j-1].transit.line.short_name + '</strong></span>';
							htmltxt5 +=	legs.steps[j-1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
							htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-1].transit.line.vehicle.icon + '">';
							htmltxt5 +=	legs.steps[j-1].transit.arrival_stop.name;
							if (is_al[j]==0) {
								htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
								} else {
								htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'분 전</strong></span></span></div>';
								}
							htmltxt5 +=	'</div>';
							} else { // 만약 도보일 경우 리스트		
								if(j==1) {
								htmltxt5 +=	'<div class="loca-name1">';
								htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt5 +=	legs.start_address  + ' <i class="fa fa-caret-right"></i> ';
								htmltxt5 +=	'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j].transit.line.vehicle.icon + '">';
								htmltxt5 +=	legs.steps[j - 1].instructions;
								if (is_al[j]==0) {
									htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
									} else {
									htmltxt5 += '<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
									}
								htmltxt5 +=	'</div>';
								}else {
									htmltxt5 +=					'<div class="loca-name1">';
									htmltxt5 +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-2].transit.line.vehicle.icon + '">';
									htmltxt5 +=						legs.steps[j-2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
									if (j+1 < legs.steps.length+1) {
										htmltxt5 +=					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j].transit.line.vehicle.icon + '">';
										htmltxt5 +=					legs.steps[j-1].instructions;
										if (is_al[j]==0) {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
											} else {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
											}
									} else { // 마지막 스탭일 경우
										htmltxt5 +=					legs.end_address;
										if (is_al[j]==0) {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
											} else {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
											}
									}
									htmltxt5 +=					'</div>';
									}
							}
				  	htmltxt5 +=			 	'</div>';
				  	htmltxt5 +=			'</div>';
				  	htmltxt5 +=		'</div>';
				  		}
				  	htmltxt5 +=	'</div>';//내용부분 끝
				  		
				  	htmltxt5 +=	 '<a class="left caro-control-left text-center" href="#carousel-example-generic" data-slide="prev">';
				  	htmltxt5 +=		'<span class="glyphicon glyphicon-chevron-left text-info"></span>';
				  	htmltxt5 +=	 '</a>';
				  	htmltxt5 +=  '<a class="right caro-control-right text-center" href="#carousel-example-generic" data-slide="next">';
				  	htmltxt5 += 		'<span class="glyphicon glyphicon-chevron-right text-info"></span>';
				  	htmltxt5 += 	'</a>';
				  	htmltxt5 += '</div>';
				  	htmltxt5 += '</div>';
				  	
					$('.cel-box').html(htmltxt5);
				
				var htmltxt2 = '';
				
				//어썸 htmltxt2 += '<div class="fa fa-play fa2"></div>';
			////////////////////////////////////////////////////////
			/*            원래는 이미지 메트로이미지 부분            
			사용여부는 위에 부트스트랩 carousel 에 달려있음.
			                                                      */
			////////////////////////////////////////////////////////
				for (var i = 0; i < legs.steps.length; i++) {
					htmltxt2 += '<div class="metro-image">';
					if (legs.steps[i] == legs.steps[0]) {
						htmltxt2 += '<div class="start">' + legs.start_address
								+ '</div>';
					} else if (legs.steps[i].transit != null) {
						htmltxt2 += '<div class="hwan1">'
								+ legs.steps[i].transit.departure_stop.name
								+ '</div>';
						htmltxt2 += '<div class="hwan2">'
								+ legs.steps[i].transit.arrival_stop.name
								+ '</div>';
					} else if (legs.steps[i] == legs.steps[legs.steps.length - 1]) {
						htmltxt2 += '<div class="end">' + legs.end_address
								+ '</div>';
					} else {
						htmltxt2 += '<div>' + legs.steps[i].instructions + '</div>';
					}

					htmltxt2 += '</div>';
				}

				$('.rout-box').html(htmltxt2);
				
				var htmltxt = '';
				for (var i = 0; i < legs.steps.length + 1; i++) {
					
					var ald = al_info[i];
					var althum = is_al[i];
					var thum;
					if (althum == 1) {
						thum = "text-danger";
					} else {
						thum = "text-muted";
					}
					htmltxt += 	'<div class="list-case">';
					htmltxt += 		'<div>';
					htmltxt += 			'<div class="panel-heading">';
					htmltxt += 				'<div class="panel-title">';
					htmltxt += 					'<div>';

					/************************************************************/
					/* 	[출발지 알람]
						출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
					/************************************************************/
					if (i == 0) {
						
						// 리스트 전체를 감싸는 a 태그
						htmltxt += 					'<div>';
						if (is_al[0]==0) {
							htmltxt += 					'<span id="alth_box"><span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span></span>';
							} else {
							htmltxt += 					'<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';
							}
						htmltxt +=						'<span class="text-muted"> Step. ' + (i + 1) + '</span>';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt += 					'</div>'; // 설정없는 div 박스 끝

						htmltxt += 					'<div class="loca-name">';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt += legs.start_address + '에서 출발';
						htmltxt += 					'</div>'; // <div class="loca-name"> 끝
						htmltxt += 					'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
						if (is_al[0]==0) {
						htmltxt += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
						} else {
						htmltxt += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + i + '" class="text-danger"><strong>'+ald+'분 전</strong></span></span></div>';
						}
					} else { // i가 0이 아닐 때, steps에는 -1
						
						/************************************************************/
						/* 	[stpes의 travel_mode 표시]
							스탭의 번호와 이동모드를 아이콘으로 표시해준다.
							
							legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
							경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
						/************************************************************/
						htmltxt += 						'<div>';
						if (legs.steps[i - 1].travel_mode != ("WALKING")) {
							htmltxt += 						'<a id="althumb' + i + '" class="alarm-thumbnail ' + thum + '" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a>';
						} else {
							htmltxt += 						'<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';
						}
						htmltxt += 							'<span class="text-muted"> Step. ' + (i + 1) + ' </span>';
						if (legs.steps[i - 1].travel_mode == ("WALKING")) {
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						}
						htmltxt +=						'<span class="text-danger"><strong>' + legs.steps[i - 1].duration.text + '</strong></span>';
						htmltxt += 						'</div>';

						/********** 각 스탭들 내용 *********/
						if (legs.steps[i - 1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt += 					'<div class="loca-name">';
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt += 						'<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff">'
							htmltxt +=							'<strong>' + legs.steps[i - 1].transit.line.short_name + '</strong>';
							htmltxt +=						'</span>';
							htmltxt += 						legs.steps[i - 1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
							
									
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt += 						legs.steps[i - 1].transit.arrival_stop.name;
							htmltxt += 					'</div>';
							htmltxt += 					'<div class="sub_info">출발시간: <strong>' + legs.steps[i - 1].transit.departure_time.text + '</strong></div>';
							if (is_al[i] == 0) {
								htmltxt +=				'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">OFF</span></span></div>';
							} else {
								htmltxt += 				'<div class="sub_info"><span>알람설정: <img class="icon-pos1" style="height: 12px; width: 12px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">'
														+ legs.steps[i - 1].transit.arrival_stop.name
														+ ' 도착 <span id="altime' + i +'" class="text-danger"><strong>'
														+ ald + 'm 전</strong></span></span></div>';
							}
							
						} else { // 만약 도보일 경우 리스트
							if (i == 1) {
								htmltxt += 				'<div class="loca-name">';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt += 					legs.start_address + ' <i class="fa fa-caret-right"></i> ';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
								htmltxt += 					legs.steps[i - 1].instructions;
								htmltxt += 				'</div>';
								htmltxt += 				'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
								htmltxt += 				'<div class="sub_info"><span>알람설정: <span id="altime' + i + '" class="text-warning">OFF</span></span></div>';
							} else {
								htmltxt += 				'<div class="loca-name">';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
								htmltxt += 					legs.steps[i - 2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
								if (i + 1 < legs.steps.length + 1) {
									htmltxt += 				'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
									htmltxt += 				legs.steps[i - 1].instructions;
								} else { // 마지막 스탭일 경우
									htmltxt += 				legs.end_address
								}
								htmltxt += 				'</div>';
								htmltxt += 				'<div class="sub_info">출발시간: <strong>'
														+ legs.steps[i - 2].transit.arrival_time.text
														+ '</strong></div>';
								htmltxt += 				'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">OFF</span></span></div>';
							}

						}
					} // i가 0이 아닌, else문 종료						
					htmltxt += '</div>';
					htmltxt += '</div>'; // <div class="panel-title"> 끝
					htmltxt += '</div>'; // <div class="panel-heading"> 끝	

					htmltxt += '</div>'; // div 박스 끝
					htmltxt += '</div>'; // <div class="list-case"> 끝

				}
				

				$('.list-box').html(htmltxt);

				////////////////////////////////////////////////////////
				/* 	[시간 알람]
					시간알람에 관한 html에 jsp를 사용하기 위한 코드   
					                                          */
				////////////////////////////////////////////////////////
				
				var htmltxt3 = '';
				htmltxt3 += '<div class="text-center sub-header-box">';
				htmltxt3 += '<span>출발시간 <strong id="dep-time">'
						+ legs.departure_time.text
						+ '</strong> 도착시간 <strong';
				htmltxt3 += 		' id="arr-time">'
						+ legs.arrival_time.text + '</strong>';
				htmltxt3 += '</span>';
				htmltxt3 += '</div>';

				$('.clock').html(htmltxt3);
				
				set_alarm();
			}
			
			////////////////////////////////////////////////////////
			/* 	[시간 알람]
				페이지의 step.1은 시간으로 알람을 설정하는데, 그것을
				설정 하기위한 코드   
				                                                  */
			////////////////////////////////////////////////////////
			function set_alarm() {
				if (step == 0) {
					if (is_al[step] == 1) {
						time_al = setInterval(time_alarm, 60000);
					} else if (is_al[step] == 0){
						for (var i=0; i < is_al.length; i++) {
							if (is_al[step] == 0) {
								step++;	
							} else if (is_al[step] == 1) {
								break;
							}
						}
					}
				}
			}
			
			////////////////////////////////////////////////////////
			/* 	[시간 알람]
				페이지의 step.1은 시간으로 알람을 설정하는데, 그것을 
				설정 하기위한 코드   
				                                                  */
			////////////////////////////////////////////////////////
			function time_alarm() {
				var now = new Date();
				
				var hour = Number(legs.departure_time.value.substring(11,13)) + 9;
				var minu = Number(legs.departure_time.value.substring(14,16));
				
				if (hour > 24) {
					hour -= 24;
				}
				
				minu = minu - Number(al_info[0]);
				
				if (minu < 0) {
					hour -= 1;
					minu += 60;
				}
				
				if (now.getHours() == hour) {
					if (now.getMinutes() >= minu) {
						window.plugins.toastViewer.show("출발 " + al_info[0] + " 분전 입니다.");
						playBeep();
						vibrate();
						clearInterval(time_al);
						step++;
					}
				}
			}
			
			$(document).on('click', '.submit_btn', function() {				
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function(position) {
						if (step >= 1) {
							window.plugins.toastViewer.show(distance(legs.steps[step-1].end_location.b, legs.steps[step-1].end_location.d, position.coords.latitude, position.coords.longitude) + "m 남음");
						}
						
						// 배경 레이어를 화면에 표시한다.
						$("#glayLayer").fadeIn(300);

						// 이미지 레어를 화면에 표시한다.
						$("#overLayer").fadeIn(200);

						// 링크가 갖는 href 속성의 주소를 <img>태그에 설정하여 이미지 레이어에 출력
						$("#overLayer").html('<img src="http://openapi.naver.com/map/getStaticMap?version=1.0&crs=EPSG:4326&center=' + position.coords.longitude + ',' + position.coords.latitude + '&level=10&w=280&h=400&maptype=default&markers=' + position.coords.longitude + ',' + position.coords.latitude + '&key=8a2d17c98fec8873eb768735df4bcf58&uri=blog.naver.com/crimwax" />');

						// 링크의 페이지 이동 중단.
						return false;
					},errorCallback);
				}
			});
			
			// (화면에 표시된) 배경 레이어를 클릭한 경우
			$(document).on('click', "#glayLayer", function() {
				// 배경 레이어의 숨김
				$(this).fadeOut(300);

				// 이미지 레이어의 숨김
				$("#overLayer").fadeOut(200);
			});
			
			function errorCallback(error) {
				alert(error.message);
			}
		}
			
		} else {
			var dbSize = 1 * 1024 * 1024;
			var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
		
			var key = sessionStorage["journey_key"];
			var legs = JSON.parse(localStorage[key]);

			var is_al = null;
			var al_info = null;
			
			journeyAlDB.transaction(function(tx){
				tx.executeSql("SELECT is_al, al_info FROM journeyAlDB WHERE key = ?", [key], 
					start, function(tx, e) {
					}
				);
			});
			
			function start(tx, rs){
				var db_is_al = rs.rows.item(0).is_al;
				var db_al_info = rs.rows.item(0).al_info;
				is_al = db_is_al.split(",");
				al_info = db_al_info.split(",");
				
				////////////////////////////////////////////////////////
				/* 	[carousel을 이용한 경로화면]
				카러셀을 이용해서 만든 경로화면으로 스텝별로 화면이 나오
				게 설정 , 출발스텝은 나오지않음
				*/
				////////////////////////////////////////////////////////
				var htmltxt5 = '';
					htmltxt5 += '<div class="cel-content">'
					htmltxt5 += '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">'
					htmltxt5 += 	'<ol class="step-array">'
						for (var i = 0; i < legs.steps.length+1; i++) {
					htmltxt5 += 		'<button data-target="#carousel-example-generic" data-slide-to="'+i+'" class="btn btn-warning btn-xs">step'+(i+1)+'</button> '
						}
					htmltxt5 += 	'</ol>';
				
				  	htmltxt5 += '<div class="carousel-inner">';
				  	htmltxt5 +=		'<div class="item active text-center">';
				  	htmltxt5 +=			'<div>';
				  	htmltxt5 +=				'<div class="inline-block marin-top-50">';
				  			
				  	htmltxt5 +=				'</div>'
				  	htmltxt5 +=				'<div class="inline-block">'
				  		if (legs.steps[0].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt5 +=						'<div class="loca-name1">';
							htmltxt5 +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[0].transit.line.vehicle.icon + '">';
							htmltxt5 +=							legs.start_address + '에서 출발';
							if (is_al[0]==0) {
								htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
								} else {
								htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + 0 + '" class="text-danger"><strong>'+al_info[0]+'분 전</strong></span></span></div>';
								}
							htmltxt5 +=						'</div>';
							} else { // 만약 도보일 경우 리스트		
								htmltxt5 +=					'<div class="loca-name1">';
								htmltxt5 +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt5 +=						legs.start_address + '에서 출발';
								if (is_al[0]==0) {
									htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
									} else {
									htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + 0 + '" class="text-danger"><strong>'+al_info[0]+'분 전</strong></span></span></div>';
									}
								htmltxt5 +=					'</div>';
								}
						
				  	htmltxt5 +=			 	'</div>';
				  	htmltxt5 +=			'</div>';
				  	htmltxt5 +=		'</div>';
				  	
				  		for (var j = 1; j < legs.steps.length+1; j++) {
				  			
				  	htmltxt5 +=		'<div class="item text-center">';
				  	htmltxt5 +=			'<div>'
				  	htmltxt5 +=				'<div class="inline-block marin-top-50">';//큰아이콘 시작
				  	
				  	htmltxt5 +=				'</div>'//큰아이콘 끝
				  	htmltxt5 +=				'<div class="inline-block">'; //내용부분 시작
				  	
				  		if (legs.steps[j-1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt5 +=						'<div class="loca-name1">';
							htmltxt5 +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-1].transit.line.vehicle.icon + '">';
							htmltxt5 +=							'<span class="icon-pos2" style="background-color:' + legs.steps[j-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>' + legs.steps[j-1].transit.line.short_name + '</strong></span>';
							htmltxt5 +=							legs.steps[j-1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
							htmltxt5 +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-1].transit.line.vehicle.icon + '">';
							htmltxt5 +=							legs.steps[j-1].transit.arrival_stop.name;
							if (is_al[j]==0) {
								htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
								} else {
								htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'분 전</strong></span></span></div>';
								}
							htmltxt5 +=						'</div>';
							} else { // 만약 도보일 경우 리스트		
								if(j==1) {
								htmltxt5 +=					'<div class="loca-name1">';
								htmltxt5 +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt5 +=						legs.start_address  + ' <i class="fa fa-caret-right"></i> ';
								htmltxt5 +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j].transit.line.vehicle.icon + '">';
								htmltxt5 +=						legs.steps[j - 1].instructions;
								if (is_al[j]==0) {
									htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
									} else {
									htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
									}
								htmltxt5 +=					'</div>';
								}else {
									htmltxt5 +=					'<div class="loca-name1">';
									htmltxt5 +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j-2].transit.line.vehicle.icon + '">';
									htmltxt5 +=						legs.steps[j-2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
									if (j+1 < legs.steps.length+1) {
										htmltxt5 +=					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[j].transit.line.vehicle.icon + '">';
										htmltxt5 +=					legs.steps[j-1].instructions;
										if (is_al[j]==0) {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
											} else {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
											}
									} else { // 마지막 스탭일 경우
										htmltxt5 +=					legs.end_address;
										if (is_al[j]==0) {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
											} else {
											htmltxt5 += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + (j) + '" class="text-danger"><strong>'+al_info[j]+'m 전</strong></span></span></div>';
											}
									}
									htmltxt5 +=					'</div>';
									}
							}
				  	htmltxt5 +=			 	'</div>';
				  	htmltxt5 +=			'</div>';
				  	htmltxt5 +=		'</div>';
				  		}
				  	htmltxt5 +=	'</div>';//내용부분 끝
				  		
				  	htmltxt5 +=	 '<a class="left caro-control-left text-center" href="#carousel-example-generic" data-slide="prev">'
				  	htmltxt5 +=		'<span class="glyphicon glyphicon-chevron-left text-info"></span>'
				  	htmltxt5 +=	 '</a>'
				  	htmltxt5 +=  '<a class="right caro-control-right text-center" href="#carousel-example-generic" data-slide="next">'
				  	htmltxt5 += 		'<span class="glyphicon glyphicon-chevron-right text-info"></span>'
				  	htmltxt5 += 	'</a>'
				  	htmltxt5 += '</div>'
				  	htmltxt5 += '</div>'
				  	
					$('.cel-box').html(htmltxt5);
				
				var htmltxt2 = '';
				
				//어썸 htmltxt2 += '<div class="fa fa-play fa2"></div>';
			////////////////////////////////////////////////////////
			/*            원래는 이미지 메트로이미지 부분            
			사용여부는 위에 부트스트랩 carousel 에 달려있음.
			                                                      */
			////////////////////////////////////////////////////////
				for (var i = 0; i < legs.steps.length; i++) {
					htmltxt2 += '<div class="metro-image">';
					if (legs.steps[i] == legs.steps[0]) {
						htmltxt2 += '<div class="start">' + legs.start_address
								+ '</div>';
					} else if (legs.steps[i].transit != null) {
						htmltxt2 += '<div class="hwan1">'
								+ legs.steps[i].transit.departure_stop.name
								+ '</div>';
						htmltxt2 += '<div class="hwan2">'
								+ legs.steps[i].transit.arrival_stop.name
								+ '</div>';
					} else if (legs.steps[i] == legs.steps[legs.steps.length - 1]) {
						htmltxt2 += '<div class="end">' + legs.end_address
								+ '</div>';
					} else {
						htmltxt2 += '<div>' + legs.steps[i].instructions + '</div>';
					}

					htmltxt2 += '</div>';
				}

				$('.rout-box').html(htmltxt2);
				
				var htmltxt = '';
				for (var i = 0; i < legs.steps.length + 1; i++) {
					
					var ald = al_info[i];
					var althum = is_al[i];
					var thum;
					if (althum == 1) {
						thum = "text-danger";
					} else {
						thum = "text-muted";
					}
					htmltxt += 	'<div class="list-case">';
					htmltxt += 		'<div>';
					htmltxt += 			'<div class="panel-heading">';
					htmltxt += 				'<div class="panel-title">';
					htmltxt += 					'<div>';

					/************************************************************/
					/* 	[출발지 알람]
						출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
					/************************************************************/
					if (i == 0) {
						
						// 리스트 전체를 감싸는 a 태그
						htmltxt += 					'<div>';
						if (is_al[0]==0) {
							htmltxt += 					'<span id="alth_box"><span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span></span>';
							} else {
							htmltxt += 					'<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';
							}
						htmltxt +=						'<span class="text-muted"> Step. ' + (i + 1) + '</span>';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt += 					'</div>'; // 설정없는 div 박스 끝

						htmltxt += 					'<div class="loca-name">';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt += legs.start_address + '에서 출발';
						htmltxt += 					'</div>'; // <div class="loca-name"> 끝
						htmltxt += 					'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
						if (is_al[0]==0) {
						htmltxt += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: <span class="text-warning">OFF</span></span></div>';
						} else {
						htmltxt += 					'<div id="alinfotxt" class="sub_info"><span>알람설정: 출발 <span id="altime' + i + '" class="text-danger"><strong>'+ald+'분 전</strong></span></span></div>';
						}
					} else { // i가 0이 아닐 때, steps에는 -1
						
						/************************************************************/
						/* 	[stpes의 travel_mode 표시]
							스탭의 번호와 이동모드를 아이콘으로 표시해준다.
							
							legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
							경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
						/************************************************************/
						htmltxt += 						'<div>';
						if (legs.steps[i - 1].travel_mode != ("WALKING")) {
							htmltxt += 						'<a id="althumb' + i + '" class="alarm-thumbnail ' + thum + '" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a>';
						} else {
							htmltxt += 						'<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';
						}
						htmltxt += 							'<span class="text-muted"> Step. ' + (i + 1) + ' </span>';
						if (legs.steps[i - 1].travel_mode == ("WALKING")) {
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						}
						htmltxt +=						'<span class="text-danger"><strong>' + legs.steps[i - 1].duration.text + '</strong></span>';
						htmltxt += 						'</div>';

						/********** 각 스탭들 내용 *********/
						if (legs.steps[i - 1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt += 					'<div class="loca-name">';
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt += 						'<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff">'
							htmltxt +=							'<strong>' + legs.steps[i - 1].transit.line.short_name + '</strong>';
							htmltxt +=						'</span>';
							htmltxt += 						legs.steps[i - 1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
							
									
							htmltxt += 						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt += 						legs.steps[i - 1].transit.arrival_stop.name;
							htmltxt += 					'</div>';
							htmltxt += 					'<div class="sub_info">출발시간: <strong>' + legs.steps[i - 1].transit.departure_time.text + '</strong></div>';
							if (is_al[i] == 0) {
								htmltxt +=				'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">OFF</span></span></div>';
							} else {
								htmltxt += 				'<div class="sub_info"><span>알람설정: <img class="icon-pos1" style="height: 12px; width: 12px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">'
														+ legs.steps[i - 1].transit.arrival_stop.name
														+ ' 도착 <span id="altime' + i +'" class="text-danger"><strong>'
														+ ald + 'm 전</strong></span></span></div>';
							}
							
						} else { // 만약 도보일 경우 리스트
							if (i == 1) {
								htmltxt += 				'<div class="loca-name">';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt += 					legs.start_address + ' <i class="fa fa-caret-right"></i> ';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
								htmltxt += 					legs.steps[i - 1].instructions;
								htmltxt += 				'</div>';
								htmltxt += 				'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
								htmltxt += 				'<div class="sub_info"><span>알람설정: <span id="altime' + i + '" class="text-warning">OFF</span></span></div>';
							} else {
								htmltxt += 				'<div class="loca-name">';
								htmltxt += 					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
								htmltxt += 					legs.steps[i - 2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
								if (i + 1 < legs.steps.length + 1) {
									htmltxt += 				'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
									htmltxt += 				legs.steps[i - 1].instructions;
								} else { // 마지막 스탭일 경우
									htmltxt += 				legs.end_address
								}
								htmltxt += 				'</div>';
								htmltxt += 				'<div class="sub_info">출발시간: <strong>'
														+ legs.steps[i - 2].transit.arrival_time.text
														+ '</strong></div>';
								htmltxt += 				'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">OFF</span></span></div>';
							}

						}
					} // i가 0이 아닌, else문 종료						
					htmltxt += '</div>';
					htmltxt += '</div>'; // <div class="panel-title"> 끝
					htmltxt += '</div>'; // <div class="panel-heading"> 끝	

					htmltxt += '</div>'; // div 박스 끝
					htmltxt += '</div>'; // <div class="list-case"> 끝

				}
				

				$('.list-box').html(htmltxt);

				////////////////////////////////////////////////////////
				/* 	[시간 알람]
					시간알람에 관한 html에 jsp를 사용하기 위한 코드   
					                                          */
				////////////////////////////////////////////////////////
				
				var htmltxt3 = '';
				htmltxt3 += '<div class="text-center sub-header-box">';
				htmltxt3 += '<span>출발시간 <strong id="dep-time">'
						+ legs.departure_time.text
						+ '</strong> 도착시간 <strong';
				htmltxt3 += 		' id="arr-time">'
						+ legs.arrival_time.text + '</strong>';
				htmltxt3 += '</span>';
				htmltxt3 += '</div>';

				$('.clock').html(htmltxt3);
			}
		}		
	</script>
</body>
</html>